<script setup>
import { ref } from 'vue'
const showPop = ref(true)
const types = ref([
  {
    type: '材料',
    classify: {
      复核材料轻量化: '<p>暂无</p>'
    }
  },
  {
    type: '硬件组件',
    classify: {
      整机设计:
        '<p>希龙科技（深圳）有限公司、<i>中飞智能制造（深圳）有限公司</i>、深圳兴汇航空科技有限公司、深圳玉龙无人机技术有限公司、深圳市科控通航技术股份有限公司</p>',
      传感器: '<p>暂无</p>',
      电池与动力系统: '<p>暂无</p>'
    }
  },
  {
    type: '软件技术',
    classify: {
      飞控系统: '<p>深圳运飞智能有限公司</p>',
      通信与导航设施: '<p>暂无</p>'
    }
  }
])

const navlist = ref(types.value.map((i) => i.type))
const navbar = ref(navlist.value[0])
const contentJson = ref(types.value.find((i) => i.type == navbar.value).classify)

const choseBar = (item) => {
  navbar.value = item
  contentJson.value = types.value.find((i) => i.type == navbar.value).classify
}

const poptitle = ref('上游企业总览')
const setData = (title, typess) => {
  poptitle.value = title + '总览'
  showPop.value = true
  types.value = typess
  navlist.value = types.value.map((i) => i.type)
  navbar.value = navlist.value[0]
  contentJson.value = types.value.find((i) => i.type == navbar.value).classify
}

defineExpose({
  setData
})
</script>

<template>
  <transition
    appear
    name="custom-classes-transition"
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <div class="EnterpriseOverview" v-if="showPop">
      <p class="title">
        <span>{{ poptitle }}</span>
        <span @click="showPop = false"><img src="@img/industry/close.png" alt="" /></span>
      </p>
      <div class="navbox">
        <p
          v-for="(item, index) in navlist"
          :key="index"
          @click="choseBar(item)"
          :class="{ active: navbar == item }"
        >
          {{ item }}
        </p>
      </div>
      <div class="content">
        <div class="left">
          <p v-for="(v, k) in contentJson" :key="k">· {{ k }}：</p>
        </div>
        <div class="right">
          <p v-for="(v, k) in contentJson" :key="k" v-html="v"></p>
        </div>
      </div>
    </div>
  </transition>
</template>
<style scoped lang="scss">
.EnterpriseOverview {
  width: 740px;
  height: 280px;
  background: url('@img/industry/pop_big.png');
  background-size: 100% 100%;

  .title {
    display: flex;
    justify-content: space-between;
    padding: 15px 15px 20px 55px;
    font-size: 18px;

    span:last-child {
      img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
  }

  .navbox {
    display: flex;
    margin: 0 26px;

    p {
      width: 127px;
      height: 26px;
      text-align: center;
      line-height: 26px;
      color: #85b9cb;
      cursor: pointer;
      background: url('@img/industry/nochose.png');
      background-size: 100% 100%;

      &.active {
        color: #fff;
        background: url('@img/industry/chosed.png');
        background-size: 100% 100%;
      }
    }
  }

  .content {
    display: flex;
    margin: 10px 26px;
    height: 160px;
    overflow-y: auto;

    .left {
      width: 142px;
      background: url('@img/industry/overview_left.png');
      background-size: 100% auto;
      color: #88eaf5;

      p {
        height: 53px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #88eaf5;
      }
    }

    .right {
      flex: 1;
      margin-left: 6px;
      p {
        height: 53px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        font-size: 13px;
        background: rgba(0, 213, 255, 0.1);

        :deep {
          i {
            color: #ffe100;
            font-style: normal;
          }
        }

        &:nth-child(even) {
          background: rgba(28, 115, 132, 0.1);
        }
      }
    }
  }
}
</style>
